<script setup>
const user = computed(() => {
  return JSON.parse(localStorage.getItem('user'));
});
import {computed, onMounted, ref} from 'vue'
import axios from 'axios'
import {ElMessage,ElMessageBox} from 'element-plus'
import qs from "qs";

const input=ref('')
const value=ref();

//表格数据
const tableData =ref([])
function getaddress(){
  axios({
    method:"get",
    url:"http://localhost:8080/user/getUserAddress",
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'  //必须设置传输方式
    }
  }).then((response)=>{
    tableData.value=response.data

  }).catch((error)=>{
    console.log(error);
  })
}
getaddress();

//添加地址
let dialogVisible=ref(false)
let form=ref({
  shname:'',
  shtel:'',
  address:'',
    uid:user.value.uid
})
//取消按钮的点击事件
function cancelAdd() {
  // 清空表单
  form.value = {
    shname:'',
    shtel:'',
    address:'',

  };
  dialogVisible.value = false;
}
function addaddress(){
  // 检查输入框是否为空
  if (!form.value.shname ||!form.value.shtel ||!form.value.address) {
    ElMessage({
      message: '请输入完整的姓名、联系电话和地址',
      type: 'warning',
      showClose: true,
    });
    return;
  }
  // 设置用户 ID
  // form.value.uid =user.value.uid;
  dialogVisible.value=false;
  axios({
    url:"http://localhost:8080/user/addUserAddress",
    method:"post",
    data:form.value
  }).then((response)=>{
    if(response.data===1){
      getaddress()
      ElMessage({
        message: '添加成功',
        type: 'success',
        showClose: true,
      })
    }else{
      getaddress()
      ElMessage({
        message: '添加失败',
        type: 'error',
        showClose: true,
      })
    }
  })
}

let formEdit=ref({
  shname:'',
  shtel:'',
  address:'',
  // uid:user.value.uid
})
//获取一条数据回显
let dialogEdVisible=ref(false)
function getone(id){
  dialogEdVisible.value=true;
  axios({
    method:'post',
    url:`/api/student/${id}`,
    transformRequest: [ function(data){
      return qs.stringify(data)  //使用Qs将请求参数序列化
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'  //必须设置传输方式
    }
  }).then((response)=>{
    formEdit.value=response.data;
    formEdit.value.uid=user.value.uid;
  })
}
//修改地址
function updateaddress(){
  // 检查输入框是否为空
  if (!formEdit.value.shname ||!formEdit.value.shtel ||!formEdit.value.address) {
    ElMessage({
      message: '请输入完整的姓名、联系电话和地址',
      type: 'warning',
      showClose: true,
    });
    return;
  }
  dialogEdVisible.value=false;
  axios({
    url:"/api/student",
    method:"post",
    data:formEdit.value
  }).then((response)=>{
    if(response.data.data===1){
      getaddress()
      ElMessage({
        message: '修改成功',
        type: 'success',
        showClose: true,
      })
    }else{
      getaddress()
      ElMessage({
        message: '修改失败',
        type: 'error',
        showClose: true,
      })
    }
  })
}

//删除地址
function deleteaddress(id){
  ElMessageBox.confirm(
      "请确定是否要删除？",
      "提示",
      {
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:'warning',
      }
  ).then(()=>{
    axios({
      method:"post",
      url:`/api/student/${id}`,
      transformRequest: [ function(data){
        return qs.stringify(data)  //使用Qs将请求参数序列化
      }],
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'  //必须设置传输方式
      }
    }).then((response)=>{
      if(response.data.status===1){
        getaddress()
        ElMessage({
          type: 'success',
          message: "删除成功",
        })
      }else{
        getaddress()
        ElMessage({
          type: 'error',
          message: "删除失败",
        })
      }
    })
  }).catch(()=>{
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}
onMounted(() => {
  getaddress();
});
</script>

<template>
  <div>
    <h2>收货地址</h2>
    <!-- 添加按钮 -->
    <el-row>
      <el-col :span="24">
        <el-button color="#EFE154" style="margin-top: 15px;margin-bottom: 20px" @click="dialogVisible=true">
          <el-icon><CirclePlus /></el-icon>添加地址
        </el-button>
      </el-col>
    </el-row>
<!--    表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="shname" label="姓名" />
      <el-table-column prop="shtel" label="联系电话" />
      <el-table-column prop="address" label="收获地址" />
      <el-table-column label="操作" >
        <template #default="scope">
          <el-tooltip content="修改" placement="bottom" effect="light">
            <el-button text type="primary" @click="getone(scope.row.id)">
              <el-icon><Edit /></el-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="bottom" effect="light">
            <el-button text type="danger" @click="deleteaddress(scope.row.id)">
              <el-icon><Delete /></el-icon>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加地址的布局 -->
    <el-dialog v-model="dialogVisible" title="添加地址" width="600">
      <el-form :model="form" style="max-width: 500px;">
        <el-form-item label="姓名" prop="shname">
          <el-input v-model="form.shname" placeholder="请填写姓名"/>
        </el-form-item>
        <el-form-item label="联系电话" prop="shtel">
          <el-input v-model="form.shtel" placeholder="请填写联系电话"/>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address"  type="textarea" placeholder="请输入地址"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelAdd">取消</el-button>
          <el-button color="#EFE154" @click="addaddress">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改地址的布局 -->
    <el-dialog v-model="dialogEdVisible" title="修改地址" width="600">
      <el-form :model="formEdit" style="max-width: 650px;">
        <el-form-item label="姓名">
          <el-input v-model="formEdit.shname" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="formEdit.shtel" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="formEdit.address"  type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogEdVisible = false">取消</el-button>
          <el-button color="#EFE154" @click="updateaddress">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>